var Product = Vue.component('product', {
    data() {
        return {
            editStatus: true,   // 是否可编辑
            zhens: [],
            suos: [],
            baos: [],
            zhensOld: [],
            suosOld: [],
            baosOld: [],
        }
    },

    template: `<div class="product__box">
                    <div class="product__con">
                        <h3 class="index__title product__title">公司产品</h3>
                        <div class="index__info product__info">
                            <div class="index__table__list product__table__list">
                                <h3 class="index__title">针织类</h3>
                                <table class="product_table">
                                    <tbody>
                                        <tr>
                                            <th>产品</th>
                                            <th>男装</th>
                                            <th>女装</th>
                                            <th>童装</th>
                                        </tr>
                                        <tr v-for="item in zhens" :key="item.id">
                                            <td>
                                                <span>{{item.name}}</span>
                                            </td>
                                            <td>
                                                <input type="checkbox" :disabled="editStatus" v-model="item.pros[1]">
                                            </td>
                                            <td>
                                                <input type="checkbox" :disabled="editStatus" v-model="item.pros[2]">
                                            </td>
                                            <td>
                                                <input type="checkbox" :disabled="editStatus" v-model="item.pros[3]">
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <div class="index__table__list product__table__list">
                                <h3 class="index__title">梭织类</h3>
                                <table class="product_table">
                                    <tbody>
                                        <tr>
                                            <th>产品</th>
                                            <th>男装</th>
                                            <th>女装</th>
                                            <th>童装</th>
                                        </tr>
                                        <tr v-for="item in suos" :key="item.id">
                                            <td>
                                                <span>{{item.name}}</span>
                                            </td>
                                            <td>
                                                <input type="checkbox" :disabled="editStatus" v-model="item.pros[1]">
                                            </td>
                                            <td>
                                                <input type="checkbox" :disabled="editStatus" v-model="item.pros[2]">
                                            </td>
                                            <td>
                                                <input type="checkbox" :disabled="editStatus" v-model="item.pros[3]">
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <div class="index__table__list product__table__list">
                                <h3 class="index__title">箱包鞋帽类</h3>
                                <table class="product_table">
                                    <tbody>
                                        <tr>
                                            <th>产品</th>
                                            <th>男装</th>
                                            <th>女装</th>
                                            <th>童装</th>
                                        </tr>
                                        <tr v-for="item in baos" :key="item.id">
                                            <td>
                                                <span>{{item.name}}</span>
                                            </td>
                                            <td>
                                                <input type="checkbox" :disabled="editStatus" v-model="item.pros[1]">
                                            </td>
                                            <td>
                                                <input type="checkbox" :disabled="editStatus" v-model="item.pros[2]">
                                            </td>
                                            <td>
                                                <input type="checkbox" :disabled="editStatus" v-model="item.pros[3]">
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="common__btn">
                        <div class="common__btn__box">
                            <span class="common__btn__sure" v-show="editStatus" @click="setEditFun">编辑</span>
                            <span class="common__btn__close" v-show="!editStatus" @click="setCancelFun">取消</span>
                            <span class="common__btn__sure" v-show="!editStatus" @click="updateNumInfo">保存设置</span>
                        </div>
                    </div>
                </div>`,

    methods: {
        setEditFun: function () {  // 编辑
            this.editStatus = !this.editStatus;
        },
        setCancelFun: function () { // 取消
            var _zhens = JSON.stringify(this.zhensOld);
            this.zhens = JSON.parse(_zhens);

            var _suos = JSON.stringify(this.suosOld);
            this.suos = JSON.parse(_suos);

            var _baos = JSON.stringify(this.baosOld);
            this.baos = JSON.parse(_baos);
            this.editStatus = !this.editStatus;
        },
        getUserInfo() {
            // 获取产品信息
            var self = this;
            $.ajax({
                type:"POST",
                url: _UrlPrefix + "/api/member/company/product-list",
                data: {
                    app_access: _AppAccess,
                    token: localStorage.getItem('token'),
                    type: 2,
                    cate: 1
                },
                success:function(res){
                    if(0 == res.code) {
                        // 针织类
                        var _zhens = JSON.stringify(res.data.zhens);
                        self.zhens = JSON.parse(_zhens);
                        self.zhensOld = JSON.parse(_zhens);
                        // 梭织类
                        var _suos = JSON.stringify(res.data.suos);
                        self.suos = JSON.parse(_suos);
                        self.suosOld = JSON.parse(_suos);
                        // 箱包鞋帽类
                        var _baos = JSON.stringify(res.data.baos);
                        self.baos = JSON.parse(_baos);
                        self.baosOld = JSON.parse(_baos);
                    }
                }
            })
        },
        updateNumInfo() {
            var _zhens = [];
            for(var i = 0;i < this.zhens.length;i++) {
                if(this.zhens[i].pros[1] == true || this.zhens[i].pros[1] == "1") {
                    this.zhens[i].pros[1] = "1";
                }else {
                    this.zhens[i].pros[1] = "0";
                }

                if(this.zhens[i].pros[2] == true || this.zhens[i].pros[2] == "1") {
                    this.zhens[i].pros[2] = "1";
                }else {
                    this.zhens[i].pros[2] = "0";
                }

                if(this.zhens[i].pros[3] == true || this.zhens[i].pros[3] == "1") {
                    this.zhens[i].pros[3] = "1";
                }else {
                    this.zhens[i].pros[3] = "0";
                }

                _zhens.push(this.zhens[i].pros);
            }

            var _suos = [];
            for(var i = 0;i < this.suos.length;i++) {
                if(this.suos[i].pros[1] == true || this.suos[i].pros[1] == "1") {
                    this.suos[i].pros[1] = "1";
                }else {
                    this.suos[i].pros[1] = "0";
                }

                if(this.suos[i].pros[2] == true || this.suos[i].pros[2] == "1") {
                    this.suos[i].pros[2] = "1";
                }else {
                    this.suos[i].pros[2] = "0";
                }

                if(this.suos[i].pros[3] == true || this.suos[i].pros[3] == "1") {
                    this.suos[i].pros[3] = "1";
                }else {
                    this.suos[i].pros[3] = "0";
                }

                _suos.push(this.suos[i].pros);
            }

            var _baos = [];
            for(var i = 0;i < this.baos.length;i++) {
                if(this.baos[i].pros[1] == true || this.baos[i].pros[1] == "1") {
                    this.baos[i].pros[1] = "1";
                }else {
                    this.baos[i].pros[1] = "0";
                }

                if(this.baos[i].pros[2] == true || this.baos[i].pros[2] == "1") {
                    this.baos[i].pros[2] = "1";
                }else {
                    this.baos[i].pros[2] = "0";
                }

                if(this.baos[i].pros[3] == true || this.baos[i].pros[3] == "1") {
                    this.baos[i].pros[3] = "1";
                }else {
                    this.baos[i].pros[3] = "0";
                }

                _baos.push(this.baos[i].pros);
            }

            // 保存信息
            var self = this;
            $.ajax({
                type:"POST",
                url: _UrlPrefix + "/api/member/company/fac-pro-set",
                data: {
                    app_access: _AppAccess,
                    token: localStorage.getItem('token'),
                    type: 2,
                    cate: 1,
                    zhens: JSON.stringify(_zhens),
                    suos: JSON.stringify(_suos),
                    baos: JSON.stringify(_baos)
                },
                success:function(res){
                    if(0 == res.code) {
                        self.getUserInfo();
                        ELEMENT.Message.success('保存数据成功');
                        self.editStatus = !self.editStatus;
                    }
                }
            })
        }
    },

    mounted() {
        
    },

    created() {
        // 获取产品信息
        this.getUserInfo();
    },
})